<template>
  <div>
    <h1>home</h1>
    <div>
      <!-- to属性接受的参数就是push方法接受的location参数,用来控制跳转 -->
      <!-- tag可以指定何种标签，同样它还是会监听点击，触发导航 -->
      <!-- active-class 设置链接激活时使用的 CSS 类名 -->
      <!-- replace 会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。 -->
      <router-link replace active-class="active" tag="button" to="/home/news"
        >新闻</router-link
      >
      <router-link
        active-class="active"
        tag="button"
        :to="{ path: '/home/music' }"
        >音乐</router-link
      >
      <router-link
        active-class="active"
        tag="button"
        :to="{ name: 'Entertainment' }"
        >娱乐</router-link
      >
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "Home",
    methods: {
      toNews() {
        // `router.replace()`:和router.push一致,但是不会留下任何的历史记录
        // this.$router.replace("/home/news");
        this.$router.push("/home/news");
      },
      toMusic() {
        // this.$router.replace({
        //   path: "/home/music",
        // });
        this.$router.push({
          path: "/home/music",
        });
      },
      toEntertainment() {
        // this.$router.replace({
        //   name: "Entertainment",
        // });
        this.$router.push({
          name: "Entertainment",
        });
      },
    },
  };
</script>

<style>
  .active {
    background: pink;
  }
</style>
